<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>举报信息集合</title>
    <style>
        .warning-row {
            background: oldlace;
        }

        .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-button type="primary" plain @click="goToChange">切换账号</el-button>
        <el-button type="primary" plain @click="goBack">返回</el-button>
    </el-row>


    <h2>以下是举报信息集合</h2>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="barName" label="贴吧名称" align="center"></el-table-column>
        <el-table-column prop="userName" label="举报者姓名" align="center"></el-table-column>
        <el-table-column prop="reason" label="原因" align="center"></el-table-column>
        <el-table-column prop="context" align="center" label="内容"></el-table-column>
        <el-table-column prop="beReport" align="center" label="被举报者"></el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-row>
                    <el-button type="danger" @click="startDelete(scope.row)">删帖</el-button>
                    <el-button type="danger" @click="startDelete(scope.row)">拒绝</el-button>
                    <el-button type="danger" @click="updateBan(scope.row)">拉黑Ta/取消拉黑</el-button>
                </el-row>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog
            title="删帖确认框"
            :visible.sync="pinLog"
            width="30%"
    >

        <el-form ref="updateForm" :model="post" label-width="80px">
            <el-input v-model="post.id" type="hidden"></el-input>
            <el-form-item label="我的昵称">
                <el-input disabled v-model="post.name"></el-input>
            </el-form-item>

            <el-form-item label="发布的贴吧名">
                <el-input disabled v-model="post.barName"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input disabled v-model="post.context"></el-input>
            </el-form-item>
            <el-form-item label="喜欢的人数">
                <el-input disabled v-model="post.likeNumber"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addPinPost">同意</el-button>
                <el-button @click="pinLog = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
    const query = location.search;
    new Vue({
        el: "#app",
        data() {
            return {
                dialogVisible:false,
                pinLog:false,

                pinPost:{
                    name:'',
                    id:'',
                    context:'',
                    likeNumber:'',
                    created_at:'',
                    barId:'',
                    barName:''
                },
                post:{
                    name:'',
                    id:'',
                    context:'',
                    likeNumber:'',
                    created_at:'',
                    barId:'',
                    barName:''
                },

                favor:{
                    id:'',
                    userName:'',
                    postId:'',
                    barName:''
                },
                report:{
                    id:'',
                    userName:'',
                    barName:'',
                    reason:'',
                    postId:'',
                    beReport:''
                },
                Bar:[],
                totalCount: 1,
                pageSize: 5,
                currentPage: 1,
                tableData: [],
                tableData2:[],
                isFollowed: true,
                likedPostIds: [],
                updateDialogVisible:false,
                refuseDialogVisible:false,
                deleteDialogVisible:false,
                UpdateDialogVisible:false,

            }
        },
        mounted() {
            this.selectAllReports();
        },
        methods: {

            selectAllReports(){
                var _this=this
                axios({
                    method:"get",
                    url:"http://localhost:8080/BarSystem/Bar/selectAllReport"+query,
                    data:_this.tableData,

                }).then(resp => {
                    _this.tableData = [];
                    _this.tableData=resp.data;
                })
                    .catch(error => {
                        console.error('Error fetching data', error);
                    });
            },


            goToChange() {
                window.location.href = 'login.jsp';
            },
            tableRowClassName({rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            handleSizeChange(val) {
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;

            },

            unFollow(row) {
                // 实现取消关注的逻辑
                // 可以通过axios向后端发送请求来处理
                console.log('取消关注', row);
            },
            addDisSupport(row) {
                const commentId =row.id ;

                //var _this = this;
                this.$confirm('是否继续给这个评论差评?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {  //确认之后执行axios请求
                    axios({
                        method: "post",
                        url: "http://localhost:8080/BarSystem/Comment/addDisSupport"+location.search+"&commentId="+commentId,
                    }).then(resp => {
                        if (resp.data === "success") {
                            //录入成功，关闭窗口,并且重新查询数据
                            this.selectOutOfMyComment();
                            this.$message({
                                message: '成功添加',
                                type: 'success'
                            });
                        }else {
                            this.selectOutOfMyComment();
                            this.$message({
                                message: '您之前已经添加过了',
                                type: 'error'
                            });
                        }
                    })

                }).catch(() => { //取消之后执行标签
                    this.$message({
                        type: 'info',
                        message: '已取消差评'
                    });
                });
            },
            supportComment(row) {
                const commentId =row.id ;

                //var _this = this;
                this.$confirm('是否继续给这个评论点赞?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {  //确认之后执行axios请求
                    axios({
                        method: "post",
                        url: "http://localhost:8080/BarSystem/Comment/supportComment"+location.search+"&commentId="+commentId,
                    }).then(resp => {
                        if (resp.data === "success") {
                            //录入成功，关闭窗口,并且重新查询数据
                            this.selectOutOfMyComment();
                            this.$message({
                                message: '成功点赞',
                                type: 'success'
                            });
                        }else {
                            this.selectOutOfMyComment();
                            this.$message({
                                message: '您之前已经点赞过了',
                                type: 'error'
                            });
                        }
                    })

                }).catch(() => { //取消之后执行标签
                    this.$message({
                        type: 'info',
                        message: '已取消点赞'
                    });
                });
            },
            OpenPage() {

                this.dialogVisible = true;
            },

            goBack(){
                window.location.href = 'User.html'+query;

            },
            deleteMyPost() {
                var _this=this
                this.post.id=this.report.postId;
                axios({
                    method:"post",
                    url: "http://localhost:8080/BarSystem/Post/deleteMyPost",
                    data:_this.post,
                }).then(resp => {
                    if (resp.data === "success") {
                        //录入成功，关闭窗口,并且重新查询数据
                        this.$message({
                            message: '成功删帖',
                            type: 'success'
                        });
                        this.deleteDialogVisible=false;
                        this.selectAllReports();
                    }
                })
            },

            startDelete(row) {
                // 获取改行已经有的数据，以供填入修改框
                var _this = this
                _this.report = JSON.parse(JSON.stringify(row));
                _this.deleteDialogVisible= true;
            },

            updateBan(row) {
                this.report = JSON.parse(JSON.stringify(row));
                this.post.id=this.report.postId;
                //var _this = this;
                this.$confirm('是否继续此操作', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {  //确认之后执行axios请求
                    axios({
                        method: "post",
                        url: "http://localhost:8080/BarSystem/Bar/updateBan"+location.search,
                        data: this.post
                    }).then(resp => {
                        if (resp.data === "success") {
                            //录入成功，关闭窗口,并且重新查询数据
                            this.$message({
                                message: '拉黑成功',
                                type: 'success'
                            });
                            this.selectAllReports();

                        }else {
                            this.$message({
                                message: '取消拉黑成功',
                                type: 'success'
                            });
                        }
                    })

                }).catch(() => { //取消之后执行标签
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },




        }
    });
</script>
</body>
</html>